<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_SideBar.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_SideBar.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {
	&quot;use strict&quot;;
	var that = null;
	
	/**
	 * 左则菜单组件，只限于两级菜单，另一版的Accordion，暂不支持数据驱动
	 * @class SideBar
	 * @constructor
	 * @example
	 *	&lt;div class=&quot;sidebar&quot;&gt;
	 *  	&lt;ul data-role=&quot;nav&quot;&gt;
 	 *			&lt;li class=&quot;has_sub&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt;基础组件&lt;span class=&quot;pull-right&quot;&gt;&lt;i class=&quot;icon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt; 
 	 *              &lt;ul&gt;
 	 *                	&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;pages/accordion/basic.html&quot;&gt;手风琴&lt;/a&gt;&lt;/li&gt;
 	 *					&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;checkBox.html&quot;&gt;复选框&lt;/a&gt;&lt;/li&gt;
 	 *					&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;pages/dropdown/basic.html&quot;&gt;下拉菜单&lt;/a&gt;&lt;/li&gt;
 	 *					&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;radio.html&quot;&gt;单选框&lt;/a&gt;&lt;/li&gt;
 	 *              &lt;/ul&gt; 
 	 *    		&lt;/li&gt;
 	 *     		&lt;li class=&quot;has_sub&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-list-alt&quot;&gt;&lt;/i&gt;组合框 &lt;span class=&quot;pull-right&quot;&gt;&lt;i class=&quot;icon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
 	 *              &lt;ul&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;基本功能&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;多选支持&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;异步加载&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;下拉表格&lt;/a&gt;&lt;/li&gt;
 	 *              &lt;/ul&gt; 
 	 *	      	&lt;/li&gt;
 	 *	      	&lt;li class=&quot;has_sub&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;i class=&quot;icon-list-alt&quot;&gt;&lt;/i&gt;树形组件 &lt;span class=&quot;pull-right&quot;&gt;&lt;i class=&quot;icon-chevron-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
 	 *              &lt;ul&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;基本功能&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;带复选框&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;异步加载&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;可拖拽节点&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;自定义节点图标&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;可编辑节点&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;节点事件&lt;/a&gt;&lt;/li&gt;
 	 *                &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; load-html=&quot;accordion.html&quot;&gt;节点右键菜单&lt;/a&gt;&lt;/li&gt;
 	 *              &lt;/ul&gt; 
 	 *	      	&lt;/li&gt;
 	 *		&lt;/ul&gt;
 	 *	&lt;/div&gt;
	 */
	var SideBar = function(element,options) {
		this.$element = $(element);
		this.options = $.extend({}, $.fn.sidebar.defaults, options);
		that = this;
//		this._init();
//		this.$element.on(&#x27;click&#x27;,&#x27;ul &gt; li &gt; a&#x27;,$.proxy(function(ev){this.itemClick(ev.currentTarget);},this));
	};
	
	SideBar.prototype = {
			
		constructor:SideBar,
		
		/**
		 * 切换方法
		 * @method toggle
		 */
		toggle:function(el,ev){
			var $this = $(el);
			if($this.parent().hasClass(&quot;has_sub&quot;)) {
		        ev.preventDefault();
			}   
			
			if(!$this.hasClass(&quot;subdrop&quot;)) {
				// hide any open menus and remove all other classes
				$(&quot;[data-role=nav] li ul&quot;).slideUp(350);
				$(&quot;[data-role=nav] li a&quot;).removeClass(&quot;subdrop&quot;);
				
				// open our new menu and add the open class
				$this.next(&quot;ul&quot;).slideDown(350);
				$this.addClass(&quot;subdrop&quot;);
			}else if($this.hasClass(&quot;subdrop&quot;)) {
				$this.removeClass(&quot;subdrop&quot;);
				$this.next(&quot;ul&quot;).slideUp(350);
			} 
		},

	};
	
	SideBar.DEFAULTS = {
//		/**
//		 * 点击其他时是否切换
//		 * @property isToggle
//		 * @type Boolean
//		 * @default true
//		 */
//		isToggle: true,
//		/**
//		 * 切换时，显示的动画动作
//		 * @property animate
//		 * @type String(&quot;fast&quot;,&quot;normal&quot;,&quot;slow&quot;,&quot;close&quot;)
//		 * @default &quot;close&quot;
//		 */
//		animate: &quot;close&quot;,
//		/**
//		 * 菜单数据
//		 * @property data
//		 * @type json对象
//		 * @default null
//		 */
//		data:null,
	};
	

  	var old = $.fn.sidebar;

  	$.fn.sidebar = function (option,target,event) {
  		return this.each(function () {
			var $this   = $(this);
			var data    = $this.data(&#x27;koala.sidebar&#x27;);
			var options = $.extend({}, SideBar.DEFAULTS, $this.data(), typeof option == &#x27;object&#x27; &amp;&amp; option);
	
			if (!data) $this.data(&#x27;koala.sidebar&#x27;, (data = new SideBar(this, options)));
			if (typeof option == &#x27;string&#x27;) data[option](target,event);
  		});
  	};

  	$.fn.sidebar.Constructor = SideBar;


  // COLLAPSE NO CONFLICT
  // ====================

  	$.fn.sidebar.noConflict = function () {
  		$.fn.sidebar = old;
  		return this;
	};

	//Click
	$(document).on(&#x27;click.koala.sidebar.data-api&#x27;, &#x27;[data-role=nav] &gt; li &gt; a&#x27;, function (e) {
	    var $this = $(this);
	    var data = $this.data(&#x27;koala.sidebar&#x27;);
//	    var option  = data ? &#x27;toggle&#x27; : $this.data();
	    $this.sidebar(&#x27;toggle&#x27;,this,e);
	});
	
	
}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
